<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<meta name="renderer" content="webkit">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>文件域 | 表单</title>
    <link rel="stylesheet" href="../../assets/dest/css/basic_reset.css">
    <link rel="stylesheet" href="../../assets/dest/css/basic_font.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_input.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_button.css?20180426">
	<link rel="stylesheet" href="../../assets/dest/css/form_button_group.css?20180427">
	<link rel="stylesheet" href="../../assets/dest/css/form_input_group.css">
	<link rel="stylesheet" href="../../assets/dest/css/form_input_file.css">
	<link rel="stylesheet" href="../demo-lib/doc.css">

	<style>
		.c-input-group {width: 300px;}
	</style>
</head>
<body>
	<div class="header">
		<dl>
			<dt>项目：</dt>
			<dd>文件域</dd>
			<dt>描述：</dt>
			<dd>表单文件域，用于简单实现文件上传</dd>
			<dt>资源：</dt>
			<dd>
				<code>basic_reset.css</code>
				<code>basic_font.css</code>
				<code>form_input.css</code>
				<code>form_input_group.css</code>
				<code>form_button.css</code>
				<code>form_button_group.css</code>
				<code>form_input_file.css</code>
			</dd>
		</dl>
	</div>
	<div class="mainbox">
		<span class="c-input-group">
			<input type="text" class="o-input" placeholder="当前没有文件" readonly>
			<label class="c-btn-group">
				<input class="o-input-file" type="file" onchange="getUpfileUrl(this)">
				<span class="o-btn o-btn-normal">浏览...</span>
			</label>
		</span>
		<hr>
		<h4>筛选文件类型：</h4>
		<pre>accept="image/png, image/jpg"</pre>
        <span class="c-input-group">
			<input type="text" class="o-input" placeholder="当前没有文件" readonly>
			<label class="c-btn-group">
				<input type="file" class="o-input-file" accept="image/png, image/jpg" onchange="getUpfileUrl(this)">
				<span class="o-btn o-btn-normal">浏览...</span>
			</label>
        </span>
        <hr>
        <h4>禁用模式：</h4>
        <span class="c-input-group">
			<input type="text" class="o-input" placeholder="当前没有文件" readonly disabled>
			<label class="c-btn-group">
				<input type="file" class="o-input-file" onchange="getUpfileUrl(this)" disabled>
				<span class="o-btn o-btn-normal" disabled>浏览...</span>
			</label>
		</span>

	</div>
	<script>
		function getUpfileUrl(elm) {
			elm.parentNode.parentNode.querySelector('input.o-input').value = elm.value
		}
	</script>
</body>
</html>
